<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      bgcolor="rgb(55, 81, 255) !important"
      bgImage="linear-gradient(rgb(55, 81, 255) 0%, rgb(76, 99, 255) 50%, rgb(91 112 255) 75%, rgb(107 127 255) 100%) !important"
      >用户提问</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="content">
      <div class="ask-box" v-for="(item, index) in quesData" :key="index">
        <p class="titles">用户问题：</p>
        <p class="text">{{ item.patientReason }}</p>
        <p class="titles">上传图片:</p>
        <p
          class="text"
          v-if="item.patientImg != null && item.patientImg.length > 0"
        >
          <van-image
            v-for="(items, index) in item.imgPatient"
            :key="index"
            width="0.7rem"
            height="0.7rem"
            @click="view(items)"
            :src="items"
          />
        </p>
        <p v-else class="text">暂无上传</p>
        <p class="titles">回复时长：</p>
        <p class="text">{{ item.questionTime }}小时内</p>
        <p class="titles">回复状态:</p>
        <p class="text">
          {{ item.questionStatus == 2 ? "已回复" : "还未回复" }}
        </p>
        <p class="titles">医生回复：</p>
        <p class="text">{{ item.doctorReason }}</p>
        <p class="titles">医生上传图片:</p>
        <p class="text" v-if="item.doctorImg != null && item.doctorImg.length > 0">
          <van-image
            v-for="(items, index) in item.imgDoctor"
            :key="index"
            width="0.7rem"
            height="0.7rem"
            @click="view(items)"
            :src="items"
          />
        </p>
        <p v-else class="text">暂无上传</p>
        <div class="btn">
          <van-button
            v-if="item.questionStatus == 1"
            plain
            @click="answer(item)"
            size="small"
            type="info"
            >回复问题</van-button
          >
        </div>
      </div>
    </div>
    <van-popup
      v-model="askShow"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
      <div class="ask-boxs">
        <p>回复问题</p>
        <van-field
          v-model="askmessage"
          rows="2"
          autosize
          type="textarea"
          maxlength="500"
          placeholder="请用10-500字回复问题"
          show-word-limit
        />
        <div class="upload">
          <van-uploader
            accept="image/*"
            v-model="fileList"
            :max-count="6"
            :after-read="afterRead"
            :before-delete="beforeDelete"
          />
        </div>
        <van-button @click="submitAn" type="info">提交</van-button>
      </div>
    </van-popup>
  </div>
</template> 

<script>
import navbar from "@/components/navbar";
import { Toast, Dialog, ImagePreview } from "vant";
import { mapGetters } from "vuex";
import {
  getOrderQuestion,
  seetOrderQuestionImg,
  setDoctorQuestion,
} from "@/api/doctor";
export default {
  name: "keepAsk",
  data() {
    return {
      askShow: false,
      askmessage: "",
      fileList: [],
      items: null,
      quesData: [],
      resArr: [],
    };
  },

  components: { navbar },

  computed: {},

  created() {
    this.items = this.$route.params.items || null;
    console.log(this.items);
    this.getList();
  },
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({
        name: "checkList",
      });
      // this.$store.commit("list/SET_DOCTOR_ITEM_STATUS", null);

      // this.$store.commit("list/SET_HOSPITAL", null);
    },
    // 获取列表
    getList() {
      let data = {
        orderId: this.items.orderId,
      };
      let toast1 = Toast.loading({
        message: this.$t("detailList.loading"),
        forbidClick: true,
        overlay: true,
      });
      getOrderQuestion(data).then((res) => {
        if (res.data.status == 200) {
          this.quesData = res.data.info;
          Toast.clear();
        } else {
          Toast.fail("系统出错");
        }
      });
    },
    afterRead(file) {
      console.log(this.nowItem);
      if (file.file) {
        var formData = new FormData();
        formData.append("file", file.file);
        formData.append("maxid", this.nowItem.questionId);
        formData.append("dsid", this.nowItem.dsid);
        formData.append("name", "doctor");
        seetOrderQuestionImg(formData).then((res) => {
          if (res.data.status == 200) {
            let str = res.data.path.match(/doctor\/(\S*)/)[1];
            let data = {
              path: res.data.path,
              str: str,
            };
            this.resArr.push(data);
          }
        });
      }
    },
    beforeDelete(file) {
      for (let i = 0; i < this.resArr.length; i++) {
        if (this.resArr[i].str == file.file.name) {
          this.resArr.splice(i, 1);
          i--;
          return true;
        }
      }
    },
    //回答
    answer(item) {
      console.log(item);
      this.nowItem = item;
      this.askShow = true;
    },
    // 预览
    view(items) {
      ImagePreview([items]);
    },
    submitAn() {
      let { askmessage, nowItem, resArr, fileList } = this;
      let deal = [];
      fileList.forEach((item) => {
        resArr.forEach((items) => {
          if (items.str == item.file.name) {
            deal.push(items.path);
          }
        });
      });
      let str = deal.join("#");
      if (askmessage.length == 0) {
        Toast.fail("请输入您的提问");
      } else {
        let data = {
          doctorReason: askmessage,
          questionId: nowItem.questionId,
          questionStatus: 2,
          doctorImg: str,
        };
        setDoctorQuestion(data).then((res) => {
          if (res.data.status == 200) {
            Toast.success("提交成功");
            this.askShow = false;
            this.askmessage = "";
            this.fileList = [];
            this.resArr = [];
            this.getList();
          } else {
            Toast.fail("系统错误，稍后再试");
          }
        });
      }
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  & .content {
    width: 95%;
    margin: auto;
    padding-bottom: 0.2rem;
    & .ask-box {
      border-radius: 0.1rem;
      background: #fff;
      margin-top: 0.1rem;
      margin-bottom: 0.1rem;
      box-shadow: 1px 1px 8px #cccccc;
      box-sizing: border-box;
      padding: 0.05rem;
      & .titles {
        font-size: 0.16rem;
        text-align: left;
        padding: 0.1rem;
        font-weight: 600;
      }
      & .text {
        text-align: left;
        color: #ff6e6e;
        // text-indent: 0.2rem;
        padding-bottom: 0.1rem;
        width: 90%;
        line-height: 0.2rem;
        margin: auto;
        & .van-image {
          margin-right: 0.05rem;
        }
      }
      & .btn {
        display: flex;
        width: 95%;
        height: 0.4rem;
        margin: auto;
        border-top: 1px solid #e6e6e6;
        justify-content: flex-end;
        margin-right: 0.1rem;
      }
      & .van-button {
        margin-top: 0.05rem;
        margin-bottom: 0.05rem;
      }
    }
  }
}
.ask-boxs {
  width: 100%;
  margin: 0 auto;
  margin-top: 0.4rem;
  padding-bottom: 0.5rem;
  & .van-button {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  & .upload {
    text-align: left;
    margin-left: 0.1rem;
    margin-top: 0.1rem;
  }
}
</style>